<template>
<div class="header">
     <div class="header-left">
         <div class="iconfont back-icon">&#xe624;</div>
     </div>
     <div class="header-input">
         <span class="iconfont">&#xe632;</span>
         输入城市景点游玩主题
    </div>

    <router-link to='/city'>
     <div class="header-right">{{city}}
         <span class="iconfont arrow-icon">&#xe615;</span>
     </div>
    </router-link>

</div>
 
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'
import {mapState, mapGetters} from 'vuex'
export default {
  name: 'HomeHeader',
  computed:{
      //映射
      ...mapState(['city']),
      ...mapGetters(['doubleCity'])
  }
}
</script>

<style lang="stylus" scoped>  
@import '~@/assets/style/varibles.styl'


.header
    display:flex
    line-height:$headerHeight
    background: $bgColor 
    color:#fff
    .header-left
        width:.64rem
        float:left
        .back-icon
            text-align :center
            font-size:.4rem
    .header-input
        flex:1 
        height: .64rem
        line-height: .64rem 
        margin-top:.12rem
        margin-left: .2rem
        padding-left:.2rem
        background :#fff
        border-radius :5px 
        color:#ccc
    .header-right
        min-width:1.04rem
        padding: 0 .1rem 
        float:right
        text-align:center
        color:#fff
        .arrow-icon
            font-size: .24rem


</style>

